<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://java.sun.com/jsf/passthrough">

    <h:body>
        <ui:composition template="./Templates/TemplateInterno.xhtml">
            <ui:define name="topoInterno"></ui:define>
            <ui:define name="content">
                <!--###################### Modal #################################-->
                <h:panelGroup layout="block" class="container">
                    <h:panelGroup layout="block" class="modal fade" id="myModal" p:role="dialog">
                        <h:panelGroup layout="block" class="modal-dialog modal-sm">
                            <h:panelGroup layout="block" class="modal-content">
                                <h:panelGroup layout="block" class="modal-header">
                                    <h:outputLabel class="modal-title" id="myModalLabel" value="Adicionar Movimentação"/>
                                </h:panelGroup>
                                <h:form role="form"> 
                                    <h:panelGroup layout="block" class="modal-body">                                         
                                        <h:panelGroup layout="block" class="form-group">
                                            <h:outputLabel value="Descrição"/>
                                            <h:panelGroup layout="block" class="input-group">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-text-background"></span></span>
                                                <h:inputText required="true" value="#{movimentacaoMB.movimentacao.descricao}" maxlength="50" class="form-control valor"/>
                                            </h:panelGroup>
                                        </h:panelGroup> 
                                        <h:panelGroup layout="block" class="form-group">
                                            <h:outputLabel value="Valor"/>
                                            <h:panelGroup layout="block" class="input-group">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-usd"></span></span>
                                                <h:inputText required="true" value="#{movimentacaoMB.movimentacao.valor}" class="form-control dinheiro"/>
                                            </h:panelGroup>
                                        </h:panelGroup>  
                                        <h:panelGroup layout="block" class="form-group">
                                            <h:outputLabel value="Lançamento"/>
                                            <h:panelGroup layout="block" class="input-group">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                                <h:inputText required="true" value="#{movimentacaoMB.dataMovimentacao}" class="form-control inteiro"/>
                                            </h:panelGroup>
                                        </h:panelGroup>   
                                        <h:outputLabel value="Conta"/><br></br>
                                        <h:panelGroup layout="block" class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                                            <h:selectOneMenu value="#{movimentacaoMB.idConta}" style="width:200px;height:30px;border-radius:3px;">
                                                <f:selectItems value="#{contaMB.listaContaCombo}"/>   							
                                            </h:selectOneMenu>
                                        </h:panelGroup><br></br>  
                                        <h:outputLabel value="Tipo Receita/Despesa"/>
                                        <h:panelGroup layout="block" class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                                            <h:selectOneMenu value="#{movimentacaoMB.idTipoMovimentacao}" style="width:200px;height:30px;border-radius:3px;">
                                                <f:selectItems value="#{tipoMovimentacaoMB.lista}"/>   							
                                            </h:selectOneMenu>
                                        </h:panelGroup>  <br></br>
                                        <h:outputLabel value="Categoria"/>
                                        <h:panelGroup layout="block" class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                                            <h:selectOneMenu value="#{movimentacaoMB.idCategoria}" style="width:200px;height:30px;border-radius:3px;">
                                                <f:selectItems value="#{categoriaMB.listaCategoria}"/>   							
                                            </h:selectOneMenu>
                                        </h:panelGroup>  
                                    </h:panelGroup>
                                    <h:panelGroup layout="block" class="modal-footer">
                                        <h:commandButton value="Cancelar" class="btn btn-danger" p:data-dismiss="modal"/>
                                        <h:commandButton value="Salvar" class="btn btn-success " type="submit">
                                            <f:ajax event="click" listener="#{movimentacaoMB.adicionarMovimentacao}" execute="@all"/>
                                        </h:commandButton>
                                    </h:panelGroup>
                                </h:form>
                            </h:panelGroup>
                        </h:panelGroup>
                    </h:panelGroup>
                </h:panelGroup>
                <!--  ####################### fim do modal cadastro ############################-->
                
                <!--###################### Modal editar #################################-->
                <h:panelGroup layout="block" class="container">
                    <div layout="block" class="modal fade" id="myModaledit" role="dialog">
                        <h:panelGroup layout="block" class="modal-dialog modal-sm">
                            <h:panelGroup layout="block" class="modal-content">
                                <h:panelGroup layout="block" class="modal-header">
                                    <h:outputLabel class="modal-title" id="myModalLabeledit" value="Adicionar Movimentação"/>
                                </h:panelGroup>
                                <h:form role="form" id="formulario"> 
                                    <h:panelGroup layout="block" class="modal-body"> 
                                        <h:panelGroup layout="block" class="form-group">
                                            <h:outputLabel value="Descrição"/>
                                            <h:panelGroup layout="block" class="input-group">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-text-background"></span></span>
                                                <h:inputText required="true" value="#{movimentacaoMB.movimentacaoEdit.descricao}" maxlength="50" class="form-control "/>
                                            </h:panelGroup>
                                        </h:panelGroup> 
                                        <h:panelGroup layout="block" class="form-group">
                                            <h:outputLabel value="Valor"/>
                                            <h:panelGroup layout="block" class="input-group">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-usd"></span></span>
                                                <h:inputText required="true" value="#{movimentacaoMB.movimentacaoEdit.valor}" class="form-control dinheiro "/>
                                            </h:panelGroup>
                                        </h:panelGroup>   
                                        <h:panelGroup layout="block" class="form-group">
                                            <h:outputLabel value="Lançamento"/>
                                            <h:panelGroup layout="block" class="input-group">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                                <h:inputText required="true" value="#{movimentacaoMB.dataEdit}" class="form-control"/>
                                            </h:panelGroup>
                                        </h:panelGroup>   
                                        <h:outputLabel value="Conta"/><br></br>
                                        <h:panelGroup layout="block" class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                                            <h:selectOneMenu value="#{movimentacaoMB.idConta}" style="width:200px;height:30px;border-radius:3px;">
                                                <f:selectItems value="#{contaMB.listaContaCombo}"/>   							
                                            </h:selectOneMenu>
                                        </h:panelGroup><br></br>  
                                        <h:outputLabel value="Tipo Receita/Despesa"/>
                                        <h:panelGroup layout="block" class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                                            <h:selectOneMenu value="#{movimentacaoMB.idTipoMovimentacao}" style="width:200px;height:30px;border-radius:3px;">
                                                <f:selectItems value="#{tipoMovimentacaoMB.lista}"/>   							
                                            </h:selectOneMenu>
                                        </h:panelGroup>  <br></br>
                                        <h:outputLabel value="Categoria"/>
                                        <h:panelGroup layout="block" class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                                            <h:selectOneMenu value="#{movimentacaoMB.idCategoria}" style="width:200px;height:30px;border-radius:3px;">
                                                <f:selectItems value="#{categoriaMB.listaCategoria}"/>   							
                                            </h:selectOneMenu>
                                        </h:panelGroup>  
                                    </h:panelGroup>
                                    <h:panelGroup layout="block" class="modal-footer">
                                        <h:commandButton value="Cancelar" class="btn btn-danger" p:data-dismiss="modal"/>
                                        <h:commandButton value="Salvar" class="btn btn-success " type="submit">
                                            <f:ajax event="click" listener="#{movimentacaoMB.atualizarMovimentacao}" execute="@all"/>
                                        </h:commandButton>
                                    </h:panelGroup>
                                </h:form>
                            </h:panelGroup>
                        </h:panelGroup>
                    </div>
                </h:panelGroup>
                <!--  ########################### Fim modal editar ########################-->
                <br/>
                <br/>
                <br/>
                <h:panelGroup layout="block" class="container">
                    <h:panelGroup layout="block" class="row">
                        <h:panelGroup layout="block" class="col-md-1"></h:panelGroup>
                        <h:panelGroup layout="block" class="col-md-11">
                            <h:panelGroup layout="block" class="panel panel-default"> 
                                <h:panelGroup layout="block" class="panel-body">
                                    <h:panelGroup layout="block" class="page-header">
                                        <h3>Minhas Movimentações</h3>
                                            <h:commandButton value="+" styleClass="btn btn-success btn-min">
                                                <f:passThroughAttribute name="data-toggle" value="modal" />
                                                <f:passThroughAttribute name="data-target" value="#myModal" />
                                            </h:commandButton> 
                                    </h:panelGroup>
                                    <center>
                                        <h:form id="tableConta">
                                            <h:dataTable value="#{movimentacaoMB.listarMovimentacao()}" var ="mov" class="table table-striped table-hover table-responsive">
                                                <h:column>
                                                    <f:facet name="header">Descrição</f:facet>
                                                       #{mov.descricao}
                                                </h:column>
                                                <h:column>
                                                    <f:facet name="header">Valor</f:facet>
                                                       #{mov.valor}
                                                </h:column>
                                                <h:column>
                                                    <f:facet name="header">Conta</f:facet>
                                                        #{mov.idConta.nome}
                                                </h:column>
                                                <h:column>
                                                    <f:facet name="header">Saldo da Conta</f:facet>
                                                        #{mov.idConta.saldo}
                                                </h:column>
                                                <h:column>
                                                    <f:facet name="header">Categoria</f:facet>
                                                       #{mov.idCategoria.nome}
                                                </h:column>
                                                <h:column>
                                                    <f:facet name="header">Lançamento</f:facet>
                                                       #{mov.dataM}
                                                </h:column>
                                                <h:column>
                                                    <f:facet name="header">Tipo</f:facet>
                                                       #{mov.idTipoMovimentacao.descricao}
                                                </h:column>
                                                <h:column>
                                                    <f:facet name="header">Ação</f:facet>
                                                    <h:commandLink>
                                                        <f:ajax event="click" render="myModaledit formulario" listener="#{movimentacaoMB.editarMovimentacao(mov)}"/>
                                                        <span class="glyphicon glyphicon-pencil"></span>
                                                        <f:passThroughAttribute name="data-toggle" value="modal" />
                                                        <f:passThroughAttribute name="data-target" value="#myModaledit"/>
                                                    </h:commandLink> &nbsp;&nbsp;
                                                    <h:commandLink  onclick="return confirm('Deseja realmente excluir a Movimentação ?');" value="" styleClass="greyishBtn submitForm" 
                                                                    action="#{movimentacaoMB.deletarMovimentacao(mov)}">
                                                        <f:ajax execute="@form"  render="tableConta"/>
                                                        <span class="glyphicon glyphicon-trash"></span>
                                                    </h:commandLink>
                                                </h:column>
                                            </h:dataTable>
                                        </h:form>   
                                    </center> 
                                </h:panelGroup>   
                            </h:panelGroup>    
                        </h:panelGroup>    
                    </h:panelGroup>
                </h:panelGroup>
            </ui:define>
            <ui:define name="rodape"></ui:define>
        </ui:composition>
    </h:body>
</html>